<!-- views/Login.vue -->  
<template >

  <div v-if="isMobile" class="page-wrapper">
    <div class="contents">
      <router-view></router-view>
    </div>
    <div class="footer">
    <div class="all_link">

      <!-- 个人页面、待办事项等链接 -->
      <router-link active-class="active-links" class="links" to="/" tag="span">成绩</router-link>
      <router-link active-class="active-links" class="links" to="/about" tag="span">个人成绩</router-link>
      <router-link active-class="active-links" class="links" to="/shen" tag="span">待办事项</router-link>
      <router-link active-class="active-links" class="links" to="/login" tag="span">登录</router-link>
    </div>
  </div>
</div>
  
<div v-else>
  <div class="all_links">
      <router-link active-class="active-link" class="link" to="/">主界面</router-link> 
      <router-link active-class="active-link" class="link" to="/about">个人页面</router-link> 
      <router-link active-class="active-link" class="link" to="/shen">待办事项</router-link>
      <router-link active-class="active-link" class="link" to="/login">登陆</router-link>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
</div>
</template>  
  
<script setup>
import { onMounted, ref } from "vue";
const active = ref(0);




// 判断是pc还是移动端
const isMobile = ref(false);

const handleResize = () => {
  isMobile.value = window.matchMedia('(max-width: 768px)').matches;
};

onMounted(() => {
  handleResize(); // 初始化时执行一次
  window.addEventListener('resize', handleResize);

  // 移动端适配  如果为移动端则执行函数进行适配
  if (isMobile) {
    (function (doc, win) {
      let docEl = doc.documentElement, // 获取html
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        width = 750, // 设计稿宽，用时只需要修改这一处
        recalc = function () {
          const clientWidth = docEl.clientWidth; // 获取设备尺寸
          if (!clientWidth) return; // 如果没有值，回去
          if (clientWidth > width) {
            // 如果超过设计稿宽度，就给一个固定值
            docEl.style.fontSize = "100px";
            // docEl.style.width = width + "px";
            docEl.style.margin = "0 auto";
          } else {
            docEl.style.fontSize = 100 * (clientWidth / width) + "px";
            docEl.style.width = "";
            docEl.style.margin = "";
          }
        };
      if (!doc.addEventListener) return; // 如果没有这个方法，中断函数
      win.addEventListener(resizeEvt, recalc, false); // 改变大小时调整一下
      doc.addEventListener("DOMContentLoaded", recalc, false); // 加载完成时调整
    })(document, window);
  }
});

</script>
<style scoped>  
.all_links {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中（如果容器高度不是固定的，可能需要调整）*/
    height: 50px;
    /* 设置容器高度以便垂直居中 */
    margin-bottom: 20px;
    /* 链接区域和内容区域之间的间距 */
  }

  .link {
    text-decoration: none;
    /* 移除链接的下划线 */
    color: red;
    /* 将链接文本颜色设置为红色 */
    font-weight: bold;
    /* 加粗字体 */
    padding: 10px 20px;
    /* 链接的内边距 */
    border-radius: 5px;
    /* 链接的圆角 */
    transition: background-color 0.3s ease;
    /* 背景色过渡效果 */
    font-size: 20px;
  }

  .link:hover {
    background-color: #f5f5f5;
    /* 鼠标悬停时的背景色 */
    color: red;
    /* 鼠标悬停时保持文本颜色为红色 */
  }

  .active-link {
    background-color: #007bff;
    /* 激活状态的链接背景色 */
    color: white;
    font-size: 20px;
    /* 激活状态的链接文本颜色（这里保持为白色）*/
  }

  .content {
    padding: 20px;
    /* 内容区域的内边距 */
    border: 1px solid #ddd;
    /* 内容区域的边框 */
    border-radius: 5px;
    /* 内容区域的圆角 */
  }
  
  .mobile-container {  
  width: 100%;  
  max-width: 600px; /* 根据需要调整 */  
  margin: 0 auto;  
  padding: 10px;  
  box-sizing: border-box;  
}  
  
.all_link {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between;  
  margin-top: 50px;
   
}  
  
.links {  
  display: inline-block;  
  padding: 5px 10px;  
  font-size: 16px; /* 根据需要调整字体大小 */  
  text-decoration: none;  
  color: rgb(248, 7, 7);  
  border: 1px solid transparent;  
  border-radius: 4px;  
  transition: border-color 0.3s ease;  
}  
  
.active-links {  
  border-color: #007bff; /* 选中时的边框颜色 */  
}  
  
.contents {  
  padding: 10px;  
}  
.footer {  
  position: fixed;  
  bottom: 0;  
  width: 90%;  
  font-weight:bold;
   
  color: #fff;  
  padding: 10px;  
  text-align: center;  
}

/* 其他移动端特定的样式 */  
@media (max-width: 600px) {  
  .mobile-container {  
    padding: 5px;  
  }  
    
  .links {  
    font-size: 14px; /* 在小屏幕上进一步减小字体大小 */  
  }  
}  
</style>
  
